---
image: /generated/articles-docs-renderer-render-frames.png
id: render-frames
title: renderFrames()
crumb: '@remotion/renderer'
---

_Part of the `@remotion/renderer` package._

Renders a series of images using Puppeteer and computes information for mixing audio.

If you want to render only a still image, use [renderStill()](/docs/renderer/render-still).

:::info
In Remotion 3.0, we added the [`renderMedia()`](/docs/renderer/render-media) API which combines `renderFrames()` and `stitchFramesToVideo()` into one simplified step and performs the render faster. Prefer `renderMedia()` if you can.
:::

:::info
Configuration in `remotion.config.ts` and CLI flags do not apply to this function. You must pass all options explicitly.
:::

## Arguments

Takes an object with the following keys:

### `composition`

_VideoConfig_

An object describing a composition using `id`, `width`, `height`, `fps` and `durationInFrames`, `defaultProps` and `props`.  
Call [`selectComposition()`](/docs/renderer/select-composition) or [`getCompositions()`](/docs/renderer/get-compositions) to get an array of possible configs.

### `onStart`

Callback function that gets called once the renderer has prepared to start rendering and has calculated the amount of frames that are going to be rendered:

```tsx twoslash
import {OnStartData} from '@remotion/renderer';

const onStart = ({
  frameCount,
  parallelEncoding, // available from v4.0.52
  resolvedConcurrency, // available from v4.0.180
}: OnStartData) => {
  console.log(`Beginning to render ${frameCount}.`);

  if (parallelEncoding) {
    console.log('Parallel encoding is enabled.');
  }

  console.log(`Using concurrency: ${resolvedConcurrency}`);
};
```

### `onFrameUpdate`

A callback function that gets called whenever a frame finished rendering. An argument is passed containing how many frames have been rendered (not the frame number of the rendered frame).

In `v3.0.0`, a second argument was added: `frame`, returning the frame number that was just rendered.

In `v3.2.30`, a third argument was rendered: `timeToRenderInMilliseconds`, describing the time it took to render that frame in milliseconds.

```ts twoslash
const onFrameUpdate = (framesRendered: number, frame: number, timeToRenderInMilliseconds: number) => {
  console.log(`${framesRendered} frames rendered.`);

  // From v3.0.0
  console.log(`${frame} was just rendered.`);

  // From v3.2.30
  console.log(`It took ${timeToRenderInMilliseconds}ms to render that frame.`);
};
```

### `outputDir`

A `string` specifying the directory (absolute path) to which frames should be saved. Pass `null` to this option and use the `onFrameBuffer` callback instead to get a `Buffer` of the frame rather than to write it to any location.

### `inputProps`

[Input Props to pass to the selected composition of your video.](/docs/passing-props#passing-input-props-in-the-cli).  
Must be a JSON object.  
From the root component the props can be read using [`getInputProps()`](/docs/get-input-props).  
You may transform input props using [`calculateMetadata()`](/docs/calculate-metadata).

### `serveUrl`

Either a Webpack bundle or a URL pointing to a bundled Remotion project. Call [`bundle()`](/docs/bundle) to generate a bundle. You can either pass the file location or deploy it as a website and pass the URL.

### `imageFormat`

_optional since v4.0 - default "jpeg"_

- Choose `jpeg` by default because it is the fastest.
- Choose `png` if you want your image sequence to have an alpha channel (for transparency).
- Choose `none` if you only want to render audio.

### `imageSequencePattern?` <AvailableFrom v="4.0.313" />

A string pattern for naming the output image sequence files. You can use the following magic replacements:

- `[frame]`: Will be replaced with the zero-padded frame number (e.g. 0001, 0002, ...)
- `[ext]`: Will be replaced with the image format extension (e.g. jpeg, png)

Default: `element-[frame].[ext]`

**Example:**

```js
renderFrames({
  ...otherOptions,
  imageSequencePattern: 'frame_[frame]_custom.[ext]',
});
// Produces: frame_0001_custom.jpeg, frame_0002_custom.jpeg, ...
```

### `concurrency?`

_optional_

A `number` specifying how many render processes should be started in parallel, a `string` specifying the percentage of the CPU threads to use, or `null` to let Remotion decide based on the CPU of the host machine. Default is half of the CPU threads available.

### `scale?`<AvailableFrom v="2.6.7" />

_number - default: 1_

[Scales the output frames by the factor you pass in.](/docs/scaling) For example, a 1280x720px frame will become a 1920x1080px frame with a scale factor of `1.5`. Vector elements like fonts and HTML markups will be rendered with extra details.

### `jpegQuality?`

_optional_

Sets the quality of the generated JPEG images. Must be an integer between 0 and 100. Default is to leave it up to the browser, [current default is 80](https://github.com/chromium/chromium/blob/99314be8152e688bafbbf9a615536bdbb289ea87/headless/lib/browser/protocol/headless_handler.cc#L32).

Only applies if `imageFormat` is `'jpeg'`, otherwise this option is invalid.

### `port?`

Prefer a specific port that will be used to serve the Remotion project. If not specified, a random port will be used.

### `frameRange?`

_optional_

Specify a single frame (passing a `number`) or a range of frames (passing a tuple `[number, number]`) to be rendered. By passing `null` (default) all frames of a composition get rendered.

### `muted`<AvailableFrom v="3.2.1" />

_optional_

Disables audio output. This option may only be set in combination with a video codec and should also be passed to [`stitchFramesToVideo()`](/docs/renderer/stitch-frames-to-video).

### `logLevel?`<AvailableFrom v="4.0.0"/>

<Options id="log" />

### `onArtifact?`<AvailableFrom v="4.0.176" />

[Handle an artifact](/docs/artifacts#using-rendermedia-renderstill-or-renderframes) that was emitted by the [`<Artifact>`](/docs/artifact) component.

### `puppeteerInstance?`

_optional_

An already open [`Browser`](/docs/renderer/open-browser) instance. Use [`openBrowser()`](/docs/renderer/open-browser) to create a new instance. Reusing a browser across multiple function calls can speed up the rendering process. You are responsible for opening and closing the browser yourself. If you don't specify this option, a new browser will be opened and closed at the end.

:::note
Despite the name, not actually compatible with `puppeteer`, only with [`openBrowser()`](/docs/renderer/open-browser).
:::

### `envVariables?`<AvailableFrom v="2.2.0" />

_optional_

An object containing key-value pairs of environment variables which will be injected into your Remotion projected and which can be accessed by reading the global `process.env` object.

### `onBrowserLog?`<AvailableFrom v="3.0.0" />

_optional_

Gets called when your project calls `console.log` or another method from console. A browser log has three properties:

- `text`: The message being printed
- `stackTrace`: An array of objects containing the following properties:
  - `url`: URL of the resource that logged.
  - `lineNumber`: 0-based line number in the file where the log got called.
  - `columnNumber`: 0-based column number in the file where the log got called.
- `type`: The console method - one of `log`, `debug`, `info`, `error`, `warning`, `dir`, `dirxml`, `table`, `trace`, `clear`, `startGroup`, `startGroupCollapsed`, `endGroup`, `assert`, `profile`, `profileEnd`, `count`, `timeEnd`, `verbose`

```tsx twoslash
interface ConsoleMessageLocation {
  /**
   * URL of the resource if known or `undefined` otherwise.
   */
  url?: string;
  /**
   * 0-based line number in the resource if known or `undefined` otherwise.
   */
  lineNumber?: number;
  /**
   * 0-based column number in the resource if known or `undefined` otherwise.
   */
  columnNumber?: number;
}

type BrowserLog = {
  text: string;
  stackTrace: ConsoleMessageLocation[];
  type: 'log' | 'debug' | 'info' | 'error' | 'warning' | 'dir' | 'dirxml' | 'table' | 'trace' | 'clear' | 'startGroup' | 'startGroupCollapsed' | 'endGroup' | 'assert' | 'profile' | 'profileEnd' | 'count' | 'timeEnd' | 'verbose';
};

const renderFrames = (options: {onBrowserLog?: (log: BrowserLog) => void}) => {};
// ---cut---
renderFrames({
  onBrowserLog: (info) => {
    console.log(`${info.type}: ${info.text}`);
    console.log(
      info.stackTrace
        .map((stack) => {
          return `  ${stack.url}:${stack.lineNumber}:${stack.columnNumber}`;
        })
        .join('\n'),
    );
  },
});
```

### `browserExecutable?`<AvailableFrom v="3.0.11" />

_optional_

A string defining the absolute path on disk of the browser executable that should be used. By default Remotion will try to detect it automatically and download one if none is available. If `puppeteerInstance` is defined, it will take precedence over `browserExecutable`.

### `cancelSignal?`<AvailableFrom v="3.0.15" />

_optional_

A token that allows the render to be cancelled. See: [`makeCancelSignal()`](/docs/renderer/make-cancel-signal)

### `onFrameBuffer?`<AvailableFrom v="3.0.0" />

_optional_

If you passed `null` to `outputDir`, this method will be called passing a buffer of the current frame. This is mostly used internally by Remotion to implement [`renderMedia()`](/docs/renderer/render-media) and might have limited usefulness for end users.

### `timeoutInMilliseconds?`<AvailableFrom v="2.6.3" />

_optional_

A number describing how long one frame may take to resolve all [`delayRender()`](/docs/delay-render) calls before the [render times out and fails(/docs/timeout). Default: `30000`

### `everyNthFrame`<AvailableFrom v="3.1.0" />

_optional_

Renders only every nth frame. For example only every second frame, every third frame and so on. Only meant for rendering GIFs. [See here for more details.](/docs/render-as-gif)

### `chromiumOptions?`<AvailableFrom v="2.6.5" />

_optional_

Allows you to set certain Chromium / Google Chrome flags. See: [Chromium flags](/docs/chromium-flags).

:::note
Chromium flags need to be set at browser launch. If you pass an instance using [`puppeteerInstance`](#puppeteerinstance), options passed to `renderFrames()` will not apply, but rather the flags that have been passed to [`openBrowser()`](/docs/renderer/open-browser).
:::

#### `disableWebSecurity?`

_boolean - default `false`_

This will most notably disable CORS among other security features.

#### `enableMultiProcessOnLinux?`<AvailableFrom v="4.0.42" />

_boolean - default `true`_

<Options id="enable-multiprocess-on-linux" />

#### `ignoreCertificateErrors?`

_boolean - default `false`_

Results in invalid SSL certificates, such as self-signed ones, being ignored.

#### `headless?`

<Options id="disable-headless" />

#### `gl?`

_string_

<Options id="gl" />

#### `userAgent?`<AvailableFrom v="3.3.83"/>

Lets you set a custom user agent that the headless Chrome browser assumes.

### `offthreadVideoCacheSizeInBytes?`<AvailableFrom v="4.0.23"/>

<Options id="offthreadvideo-cache-size-in-bytes" />

### `mediaCacheSizeInBytes?`<AvailableFrom v="4.0.352"/>

<Options id="media-cache-size-in-bytes" />

### `offthreadVideoThreads?`<AvailableFrom v="4.0.261"/>

<Options id="offthreadvideo-video-threads" />

### `binariesDirectory?`<AvailableFrom v="4.0.120" />

<Options id="binaries-directory" />

#### `onBrowserDownload?`<AvailableFrom v="4.0.137" />

<Options id="on-browser-download" />

### `chromeMode?`<AvailableFrom v="4.0.248" />

<Options id="chrome-mode" />

### ~~`quality?`~~

Renamed to `jpegQuality` in `v4.0.0`.

### ~~`dumpBrowserLogs?`~~

_optional - default `false`, deprecated in v4.0_

Deprecated in favor of [`logLevel`](#loglevel).

### ~~`parallelism?`~~

Renamed to `concurrency` in v3.2.17.
Removed in `v4.0.0`.

### ~~`ffmpegExecutable`~~

_removed in v4.0, optional_

An absolute path overriding the `ffmpeg` executable to use.

### ~~`ffprobeExecutable?`~~ <AvailableFrom v="3.0.17" />

_removed in v4.0, optional_

An absolute path overriding the `ffprobe` executable to use.

## Return value

A promise resolving to an object containing the following properties:

- `frameCount`: `number` - describing how many frames got rendered.
- `assetsInfo`: `RenderAssetInfo` - information that can be passed to `stitchFramesToVideo()` to mix audio. The shape of this object should be considered as Remotion internals and may change across Remotion versions.

## See also

- [Source code for this function](https://github.com/remotion-dev/remotion/blob/main/packages/renderer/src/render-frames.ts)
- [renderMedia()](/docs/renderer/render-media)
- [bundle()](/docs/bundle)
- [Server-Side rendering](/docs/ssr)
- [getCompositions()](/docs/renderer/get-compositions)
- [stitchFramesToVideo()](/docs/renderer/stitch-frames-to-video)
- [renderStill()](/docs/renderer/render-still)
